import React, { useEffect, useState } from 'react';
import { Tabbar } from 'react-vant';
import { FlowerO, Logistics, SendGiftO, WapHomeO } from '@react-vant/icons';
import Map from '@/components/Map';
import Background from '@/components/background';
import Home from '@/components/home';
import Sprite from '@/components/sprite';
import Project from '@/components/project';
import * as _ from 'lodash';
import spriteWh from '@/utils/dataWh/spriteWh';
export default () => {
  const [tab, setTab] = useState('home');
  const [isBattle, setIsBattle] = useState(false);
  const [mapId, setMapId] = useState<number>(1);
  useEffect(() => {
    setMapId(_.random(1, 3));
    // console.log('spritewh', spriteWh());
  }, []);
  return (
    <>
      <div style={{ backgroundColor: '#e7e5e5' }}>
        {/* <img src={require("../asset/R.jpeg")} alt="" /> */}
        {tab == 'home' && <Home mapId={mapId}></Home>}
        {tab == 'map' && <Map setMapId={setMapId} setTab={setTab}></Map>}
        {tab == 'background' && <Background></Background>}
        {tab == 'sprite' && <Sprite></Sprite>}
        {tab == 'project' && <Project></Project>}
        <div className="demo-tabbar">
          <Tabbar value={tab} onChange={(v) => setTab(v as string)}>
            <Tabbar.Item
              name="home"
              badge={{ content: 12 }}
              icon={<WapHomeO />}
            >
              场景
            </Tabbar.Item>
            <Tabbar.Item name="map" badge={{ dot: true }} icon={<Logistics />}>
              地图
            </Tabbar.Item>
            <Tabbar.Item
              name="background"
              badge={{ content: 5 }}
              icon={<SendGiftO />}
            >
              背包
            </Tabbar.Item>
            <Tabbar.Item
              name="sprite"
              badge={{ content: 10 }}
              icon={<FlowerO />}
            >
              精灵
            </Tabbar.Item>
            <Tabbar.Item
              name="project"
              badge={{ content: 10 }}
              icon={<FlowerO />}
            >
              任务
            </Tabbar.Item>
          </Tabbar>
        </div>
      </div>
    </>
  );
};
